<template>
    <div>
        <div style="display: inline-block" ref="chartCircle"
             :style="{width: styleWidthVal, height: styleHeightVal}">
        </div>
        <div style="display: inline-block; padding: 10px; margin-right: 10px;" ref="chartColumn"
             :style="{width: styleWidthVal, height: styleHeightVal}">
        </div>

        <div style="display: inline-block; vertical-align: top;"
             :style="{boxShadow: boxShadow, borderRadius:circleBorder}" >
            <MessageBoard />
        </div>

        <div>
            <template>
                <el-carousel :interval="2000" type="card" height="260px">
                    <el-carousel-item  :key="index" v-for="(item,index) in images">
                        <el-image :title="item.name" :src="item.src"></el-image>
                    </el-carousel-item>
                </el-carousel>
            </template>
        </div>
    </div>
</template>

<script>
    import main from '../main'
    import MessageBoard from './MessageBoard'

    export default {
        name: 'home',
        data() {
            return {

                optionColumn: {
                    title: {
                        text: '实时借书用户'
                    },
                    tooltip: {},
                    legend: {},
                    xAxis: {
                        data: []
                    },
                    yAxis: {},
                    series: [{
                        name: '借阅次数',
                        type: 'bar',
                        data: []
                    }]
                },
                optionCircle: {
                    title: {
                        text: '实时热门图书',
                        subtext: '',
                        left: 'center'
                    },
                    tooltip: {
                        trigger: 'item'
                    },
                    legend: {
                        orient: 'vertical',
                        left: 'left',
                    },
                    series: [
                        {
                            name: '访问来源',
                            type: 'pie',
                            radius: '50%',
                            data: [],
                            emphasis: {
                                itemStyle: {
                                    shadowBlur: 10,
                                    shadowOffsetX: 0,
                                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                                }
                            }
                        }
                    ]
                },
                images: [],
                styleWidthVal: '330px',
                styleHeightVal: '310px',
                boxShadow: '0px 2px 12px 0px rgba(0, 0, 0, 0.1)',
                circleBorder:'12px'
            }
        },
        mounted() {
            this.drawLine();    //加载图表数据
            this.drawImage(); //加载轮播图数据
        },
        activated() {

        },
        methods: {
            drawImage() {

                let _this = this
                axios.get(main.requestAddress + '/img/getImageInfo').then(function (response) {
                    //从后端返回给前端的内容(code、message、data...等等)
                    //获取到后台传过来的 Map<Object, Object> 映射
                    let imageList = response.data.data;
                    for (let i = 0; i < imageList.length; i++) {
                        _this.images.push(
                            {
                                name: imageList[i].imageName,
                                src: imageList[i].imageLink
                            }
                        );
                    }
                }).catch(function (error) {
                });
            },
            drawLine() {
                // 基于准备好的dom，初始化echarts实例
                let myChartCircle = this.$echarts.init(this.$refs.chartCircle);

                //动态从数据库中取数据
                //画饼图
                const _this = this
                axios.get(
                    main.requestAddress +
                    '/book/showPopularBooks').then(function (response) {

                    let list = response.data.data
                    let data = _this.$data.optionCircle.series[0].data

                    for (let i = 0; i < list.length; i++) {
                        data.push({
                            name: list[i].bookname,
                            value: list[i].borrowNum
                        })
                    }
                    myChartCircle.setOption(_this.$data.optionCircle);
                }).catch(function (error) {
                    alert(error);
                });

                let myChartColumn = this.$echarts.init(this.$refs.chartColumn)
                //使用刚指定的配置项和数据显示图表。
                //画柱状图
                axios.get(
                    main.requestAddress +
                    '/book/showPopularUsers').then(function (response) {
                    let list = response.data.data
                    let nameArray = _this.$data.optionColumn.xAxis.data
                    let numArray = _this.$data.optionColumn.series[0].data
                    for (let i = 0; i < list.length; i++) {
                        nameArray.push(list[i].username);
                        numArray.push(list[i].totalBorrowNum);
                    }
                    myChartColumn.setOption(_this.$data.optionColumn);

                }).catch(function (error) {
                    alert(error);
                });
            }
        },
        components:{
            MessageBoard
        }
    }
</script>

<style>


</style>